import { messages } from "share/common";
import React, { Component } from "react";
import { Tabs } from "antd";
import { connect } from "react-redux";
import { setInvoiceManageTab } from "actions/cache";
import InvoiceCheck from "./invoice-check";

const { TabPane } = Tabs;

@connect(mapStateToProps)
class InvoiceManagement extends Component {
  constructor(props) {
    super(props);
    this.state = {
      tabs: [
        {
          key: "invoice-check",
          tab: "发票校验",
        },
        {
          key: "invoice-to-cost",
          tab: "生成费用管控",
        },
        {
          key: "invoice-controls",
          tab: "发票字段设置",
        },
      ],
      defaultActiveKey: this.props.invoiceManageTab || "invoice-check",
    };
  }

  componentWillMount() {
    const {
      params: { tab },
    } = this.props;
    if (tab !== ":tab") {
      this.setState({ defaultActiveKey: tab });
    }
  }

  handleTabChange = (key) => {
    this.props.dispatch(setInvoiceManageTab(key));
  };

  formItemLayout = {
    labelCol: { span: 7 },
    wrapperCol: { span: 15, offset: 1 },
  };

  render() {
    const { tabs, defaultActiveKey } = this.state;
    return (
      <Tabs
        animated={false}
        className="invoice-control-setting full-height-page"
        defaultActiveKey={defaultActiveKey}
        onChange={this.handleTabChange}
      >
        {tabs.map((item) =>
          React.createElement(TabPane, item, <InvoiceCheck tab={item.key} />)
        )}
      </Tabs>
    );
  }
}

function mapStateToProps(state) {
  return {
    invoiceManageTab: state.cache.invoiceManageTab,
  };
}

InvoiceManagement.propTypes = {};

export default InvoiceManagement;
